<template>
  <AssociationTable
    class="app-container"
    :id="id"
    :association-service="associationService"
    :model-service="modelService"
    :default-model="defaultModel"
    :table-options="options"
    :table-name="tableName"
    ref="associationTable">
    <template #tableActionPrefix>
      <!--      <el-autocomplete-->
      <!--        class="query"-->
      <!--        v-model="content"-->
      <!--        :fetch-suggestions="querySearch"-->
      <!--        placeholder="请输入内容"-->
      <!--        @select="handleSelect"-->
      <!--      ></el-autocomplete>-->
      <el-select
        class="query"
        remote
        filterable
        default-first-option
        placeholder="Authority Code"
        v-model="content"
        :remote-method="querySearch"
        @change="handleSelect">
        <el-option v-for="item in filterAuthorities" :key="item.id" :value="item.id" :label="item.code" />
      </el-select>
    </template>
  </AssociationTable>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import AssociationTable from '@/components/Table/AssociationTable/index.vue';
  import { Resource, resourceService } from '@/services/authorization/Resource';
  import { Options } from '@/components/Table/types';
  import { accessResourceService } from '@/services/authorization/AccessResource';
  import { useSearchAuthority } from '@/views/system/AuthorityResource/hooks/UseSearchAuthority';

  export default defineComponent({
    name: 'AuthorityResource',
    components: {
      AssociationTable,
    },
    setup: () => {
      const { content, filterAuthorities, querySearch } = useSearchAuthority();
      const id = ref(undefined as string | undefined);
      const handleSelect = (value: string) => {
        console.log(value);
        id.value = value;
      };

      const tableName = 'resource';
      const defaultModel: Partial<Resource> = {
        id: undefined,
        remark: undefined,
        type: undefined,
        content: undefined,
        method: undefined,
      };
      const options: Options<Resource> = {
        type: {
          type: 'binary-category',
          label: '资源类型',
          mappings: [
            {
              label: '后端接口',
              value: 0,
            },
            {
              label: '前端菜单',
              value: 1,
            },
          ],
        },
        content: {
          type: 'value',
          label: '内容',
        },
        method: {
          type: 'category',
          label: '获取方法',
          mappings: [
            {
              label: 'All',
              value: 0,
            },
            {
              label: 'GET',
              value: 1,
            },
            {
              label: 'POST',
              value: 2,
            },
            {
              label: 'PUT',
              value: 3,
            },
            {
              label: 'PATCH',
              value: 4,
            },
            {
              label: 'DELETE',
              value: 5,
            },
          ],
        },
        remark: {
          type: 'value',
          label: '备注',
        },
      };
      return {
        content,
        filterAuthorities,
        handleSelect,
        querySearch,
        id,
        associationService: accessResourceService,
        modelService: resourceService,
        tableName,
        defaultModel,
        options,
      };
    },
  });
</script>

<style lang="scss">
  .query {
    flex-basis: 220px;
    margin-left: 10px;
    margin-right: 10px;
  }
</style>
